<template>
    <div class="tablebox">
        <table border="1px solid #9B9B9B" cellspacing="0" cellpadding="5">
            <thead>
                <tr>
                    <td colspan="2" rowspan="2">生产各工序</td>
                    <td rowspan="2">机器编号</td>
                    <td colspan="12">晚班(每天，型号，工单)</td>
                    <td rowspan="2">早班总数</td>
                    <td colspan="12">晚班(每天，型号，工单)</td>
                    <td rowspan="2">晚班总数</td>
                    <td rowspan="2">全天总数</td>
                </tr>
                <tr>
                    <td v-for="(item,index) in morning" :key="'tm'+index">{{ item+'时' }}</td>
                    <td v-for="(item,index) in evening" :key="'te'+index">{{ item+'时' }}</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in datalist" :key="item.id">
                    <td>{{ item.processId }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.machineId }}</td>
                    <td v-for="(moritem,index) in item.morning" :key="'m'+index">{{ moritem }}</td>
                    <td>{{ item.morningSum }}</td>
                    <td v-for="(eveitem,index) in item.evening" :key="'e'+index">{{ eveitem }}</td>
                    <td>{{ item.eveningSum }}</td>
                    <td>{{ item.wholeDaySum }}</td>
                </tr>
                <tr>
                    <td colspan="3">合计:</td>
                    <td v-for="(item,index) in sum" :key="'a'+index">{{ item }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import data from '../components/todayTableComponent/mock'

const morning = ref([8,9,10,11,12,13,14,15,16,17,18,19])
const evening = ref([20,21,22,23,0,1,2,3,4,5,6,7])
const datalist = ref([])
const sum = ref([])

const getData= ()=>{
    datalist.value = [...data]
    let allSum = {
        allMor:[0,0,0,0,0,0,0,0,0,0,0,0],
        allMorSum:0,
        allEve:[0,0,0,0,0,0,0,0,0,0,0,0],
        allEveSum:0,
        allWholeDay:0
    }
    datalist.value.forEach(ele => {
        let wholeDaySum = 0
        let morningSum = 0
        ele.morning.forEach((val,index)=>{
            morningSum = morningSum + val
            wholeDaySum = wholeDaySum +val
            allSum.allMor[index] = allSum.allMor[index] + val
        })
        ele.morningSum = morningSum

        let eveningSum = 0
        ele.evening.forEach((val,index)=>{
            eveningSum = eveningSum + val
            wholeDaySum = wholeDaySum +val
            allSum.allEve[index] = allSum.allEve[index] + val
        })
        
        ele.eveningSum = eveningSum

        ele.wholeDaySum = wholeDaySum
        allSum.allWholeDay = allSum.allWholeDay+wholeDaySum
    })
    allSum.allMor.forEach(val=>{
        allSum.allMorSum = allSum.allMorSum + val
    })
    allSum.allEve.forEach(val=>{
        allSum.allEveSum = allSum.allEveSum + val
    })
    sum.value = [...allSum.allMor,allSum.allMorSum,...allSum.allEve,allSum.allEveSum,allSum.allWholeDay]
}

getData()
</script>

<style scoped>
td{
    min-width: 50px;
    min-height: 25px;
    padding: 5px;
}
.tablebox{
    text-align: center;
    width: auto;
    white-space: nowrap;
    width: 100%;
}
</style>
